<template>
  <div class="regist-wrapper">
    <h3 class="register-title">
      <el-icon><Document /></el-icon>
      <p class="title-text">窗口挂号</p>
    </h3>
    <el-divider />
    <div>
      <el-button type="primary" plain @click="saveRegister">挂号</el-button>
      <el-button type="primary" plain>清空</el-button>
    </div>
    <el-descriptions
        style="margin-top: 20px;"
        title="基本信息"
        :column="3"
        size="default"
        border>
      <el-descriptions-item label="病历号">
        <el-input v-model="wyform.caseNumber"></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="姓名">
        <el-input v-model="wyform.realName"></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="身份证号">
        <el-input v-model="wyform.cardNumber" @blur="doneCardNumber"></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="性别">
        <el-select v-model="wyform.gender" disabled>
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-descriptions-item>
      <el-descriptions-item label="年龄">
        <el-input v-model="wyform.age" readonly></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="生日">
        <el-input v-model="wyform.birthday" readonly></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="家庭住址">
        <el-input v-model="wyform.homeAddress"></el-input>
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions
        style="margin-top: 20px;"
        title="挂号信息"
        :column="3"
        size="default"
        border>
      <el-descriptions-item label="结算类别">
        <el-radio-group v-model="wyform.settleCategoryId">
          <el-radio
              v-for="item in registerData.settles"
              :key="item.id"
              :value="item.id">{{item.settleName}}</el-radio>
        </el-radio-group>
      </el-descriptions-item>
      <el-descriptions-item label="看诊日期">
        <el-input v-model="wyform.visitDate" readonly></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="午别">
        <el-input v-model="wyform.noon" readonly></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="挂号科室">
        <el-select v-model="wyform.deptmentId" filterable @change="getEmp">
          <el-option
              v-for="item in registerData.depts"
              :key="item.id"
              :value="item.id"
              :label="item.name"></el-option>
        </el-select>
      </el-descriptions-item>
      <el-descriptions-item label="号别">
        <el-select v-model="wyform.registLevelId" filterable @change="getEmp">
          <el-option
              v-for="item in registerData.levels"
              :key="item.id"
              :value="item.id"
              :label="item.registName"></el-option>
        </el-select>
      </el-descriptions-item>
      <el-descriptions-item label="看诊医生">
        <el-select v-model="wyform.employeeId" filterable @change="getRegisterCount">
          <el-option
              v-for="item in registerData.emps"
              :key="item.id"
              :value="item.id"
              :label="item.realname"></el-option>
        </el-select>
      </el-descriptions-item>
      <el-descriptions-item label="初始号额">
        <el-input v-model="quota" readonly></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="已用号额">
        <el-input v-model="quotaCount" readonly></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="病历本">
        <el-switch  v-model="wyform.isBook" active-text="要" inactive-text="否" active-value="要" inactive-value="否" @change="changeIsBook"></el-switch>
      </el-descriptions-item>
      <el-descriptions-item label="应收金额">
        <el-input v-model="wyform.registMoney" readonly></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="收费方式">
        <el-select v-model="wyform.registMethod" readonly>
          <el-option label="现金"  value=现金></el-option>
          <el-option label="银行卡" value=银行卡></el-option>
          <el-option label="微信" value=微信></el-option>
          <el-option label="支付宝" value=支付宝></el-option>
          <el-option label="医保卡" value=医保卡></el-option>
        </el-select>
      </el-descriptions-item>
    </el-descriptions>
    <div id="payform" v-html="payContent"></div>
  </div>
</template>

<script setup>
import { Document } from '@element-plus/icons-vue'
import dayjs from 'dayjs'
import { nextTick,reactive, ref } from 'vue'
import { get,post } from '@/util/axios'
import {url} from "./api.js";
const payContent=ref('');
const wyform = reactive({
  caseNumber: '',
  realName: '',
  gender: '',
  cardNumber: '',
  birthday: null,
  age: null,
  homeAddress: '',
  visitDate: null,
  noon: '',
  deptmentId: null,
  employeeId: null,
  registLevelId: null,
  settleCategoryId: null,
  isBook: '否',
  registMethod: '',
  registMoney: 0
})
const quota = ref(0)
const quotaCount = ref(0)
const noonJson = { AM: '上午', PM: '下午' }
const registerData = reactive({
  settles: [],
  depts: [],
  levels: [],
  emps: []
})
const date = new Date()
init()
getRegisterData()
function init () {
  wyform.caseNumber = dayjs(date).format('YYYYMMDDHHmmssSSS')
  wyform.visitDate = dayjs(date).format('YYYY-MM-DD HH:mm:ss')
  wyform.noon = noonJson[dayjs(date).format('A')]
}
function changeIsBook(value){
    if (value==='要'){
      wyform.registMoney+=1
    }else{
      wyform.registMoney-=1
    }
}
function saveRegister(){//230126200112222096
  post(url.saveRegister,wyform,content=>{
    payContent.value=content
    console.log(payContent)
    nextTick(()=>{
      document.querySelector('#payform').firstChild.submit();
    })
  })
}
function doneCardNumber () {
  wyform.age = dayjs(date).diff(dayjs(wyform.cardNumber.substring(6, 14)), 'year')
  wyform.birthday = dayjs(wyform.cardNumber.substring(6, 14)).format('YYYY-MM-DD')
  wyform.gender = parseInt(wyform.cardNumber.substring(16, 17)) % 2 === 0 ? '女' : '男'
}
function getRegisterData () {
  get(url.getRegisterData, {}, content => {
    registerData.settles = content.settles
    registerData.depts = content.depts
    registerData.levels = content.levels
  })
}
function getEmp () {
  if (wyform.registLevelId) {
    for (const i in registerData.levels) {
      if (wyform.registLevelId === registerData.levels[i].id) {
        quota.value = registerData.levels[i].registQuota
        wyform.registMoney=registerData.levels[i].registFee/100
      }
    }
  }
  if (wyform.deptmentId && wyform.registLevelId) {
    get('/employee/getRegisterEmp', {
      week: date.getDay(),
      noon: dayjs(date).format('A'),
      deptId: wyform.deptmentId,
      registLevelId: wyform.registLevelId },
        content => {
      registerData.emps = content
    })
  }
}
function getRegisterCount () {
  get(url.getRegisterCount, {
    visitDate: dayjs(date).format('YYYY-MM-DD'),
    noon: wyform.noon,
    employeeId: wyform.employeeId }, content => {
    quotaCount.value = content
  })
}

</script>

<style scoped lang="scss">
.regist-wrapper {
  .register-title {
    display: flex;
    height: 40px;
    align-items: center;
    .title-text {
      margin-left: 5px;
    }
  }
}
.el-switch{
  --el-switch-on-color: #00ff00;
  --el-switch-off-color: red;
}
</style>
